{%extends "base.html"%}

{% block content %}
<nav aria-label="breadcrumb" class="mt-2">
  <ol class="breadcrumb px-0" style="background-color: #f0f4f5">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">station_detail</li>
  </ol>
</nav>

<div class="border-bottom pt-3 pb-2 d-flex flex-wrap flex-md-nowrap align-items-center row">
  <h4 class="mr-5">{{ station_info.station_name }}各城市分布情况</h4>
  <div class="btn-group d-flex">
    <button id="count_btn" class="btn btn-sm btn-outline-secondary active" style="font-size:13px">岗位数量</button>
    <button id="salary_btn" class="btn btn-sm btn-outline-secondary" style="font-size:13px">平均薪资</button>
    <button id="house_price_btn" class="btn btn-sm btn-outline-secondary" style="font-size:13px">城市房价水平</button>
  </div>
</div>
<!-- city map header end -->

<div id="map" class="mt-4 row border" style="height:600px;"></div>
<!-- city map end -->

<div class="border-bottom pt-5 pb-2 d-flex flex-wrap flex-md-nowrap align-items-center">
  <h4 class="mr-5">学历/经验对该岗位的影响</h4>
  <div class="btn-group d-flex">
    <button id="degree_btn" class="btn btn-sm btn-outline-secondary active" style="font-size:13px">学历</button>
    <button id="exp_btn" class="btn btn-sm btn-outline-secondary" style="font-size:13px">经验</button>
  </div>
</div>

<div id="line" class="mt-4 row border" style="height:600px;"></div>

<div class="border-bottom pt-5 pb-2 d-flex flex-wrap flex-md-nowrap align-items-center">
  <h4 class="">该岗位需要的能力和技术</h4>
</div>

<div id="pie" class="mt-4 row border" style="height:600px;"></div>
{% endblock %}

{% block styles %}
<!-- 越后面加载，优先级越高 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block scripts %}
<!-- 百度地图API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=k28IL6xxiNxtiR4RzXrOPwgOuNIA0QSL"></script>
<!-- 引入百度地图扩展 -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script>
var count_data, salary_data, house_price_data;
// 请求该岗位对应各城市的情况
$.ajax({
  type: 'GET',
  url: '/api/get_city_info?key={{ station_info.station_name }}',
  async: false, // 同步请求
  success: function(data){
    console.log(data);
    count_data = data.count_list;
    salary_data = data.salary_list;
    house_price_data = data.house_price_list;
  },
  error: function(data){
  }
});

var salary_degree, salary_exp;
$.ajax({
  type: 'GET',
  url: '/api/get_salary_info?key={{ station_info.station_name }}',
  async: false, // 同步请求
  success: function(data){
    console.log(data);
    salary_degree = data.salary_degree;
    salary_exp = data.salary_exp;
  },
  error: function(data){
  }
});

var skill_data;
$.ajax({
  type: 'GET',
  url: '/api/get_skill_info?key={{ station_info.station_name }}',
  async: false, // 同步请求
  success: function(data){
    console.log(data);
    skill_data = data;
  },
  error: function(data){
  }
});
</script>
<script src="{{ url_for('static', filename='js/station_map.js') }}"></script>
<script src="{{ url_for('static', filename='js/station_line.js') }}"></script>
<script src="{{ url_for('static', filename='js/skill_pie.js') }}"></script>
<script>
$("#salary_btn").click(function(){
  mapChart.setOption({
    series: [{
      // 根据名字对应到相应的系列
      name: '平均薪资',
      data: convertData(salary_data),
      symbolSize: function (val) {
        return val[2] / 800;
      },
    },{
      data: convertData(salary_data.sort(function (a, b) {
        return b.value - a.value;
      }).slice(0, 11)),
      symbolSize: function (val) {
        return val[2] / 800;
      },
    }]
  });
  $("#salary_btn").addClass('active');
  $("#count_btn").removeClass('active');
  $("#house_price_btn").removeClass('active');
});

$("#count_btn").click(function(){
  mapChart.setOption({
    series: [{
      // 根据名字对应到相应的系列
      name: '岗位数量',
      data: convertData(count_data),
      symbolSize: function (val) {
        return val[2] / 5;
      },
    },{
      data: convertData(count_data.sort(function (a, b) {
        return b.value - a.value;
      }).slice(0, 11)),
      symbolSize: function (val) {
        return val[2] / 5;
      },
    }]
  });
  $("#salary_btn").removeClass('active');
  $("#count_btn").addClass('active');
  $("#house_price_btn").removeClass('active');
});

$("#house_price_btn").click(function(){
  mapChart.setOption({
    series: [{
      // 根据名字对应到相应的系列
      name: '城市房价水平',
      data: convertData(house_price_data),
      symbolSize: function (val) {
        return val[2] / 1000;
      },
    },{
      data: convertData(house_price_data.sort(function (a, b) {
        return b.value - a.value;
      }).slice(0, 11)),
      symbolSize: function (val) {
        return val[2] / 1000;
      },
    }]
  });
  $("#salary_btn").removeClass('active');
  $("#count_btn").removeClass('active');
  $("#house_price_btn").addClass('active');
});

$("#degree_btn").click(function(){
  lineChart.setOption({
    xAxis: [
      {
        data: salary_degree.degree,
      }
    ],
    series: [
      {
        data:salary_degree.max
      },
      {
        data:salary_degree.mean
      },
      {
        data:salary_degree.min
      }
    ]
  });
  $("#exp_btn").removeClass('active');
  $("#degree_btn").addClass('active');
});

$("#exp_btn").click(function(){
  lineChart.setOption({
    xAxis: [
      {
        data: salary_exp.work_exp,
      }
    ],
    series: [
      {
        data:salary_exp.max
      },
      {
        data:salary_exp.mean
      },
      {
        data:salary_exp.min
      }
    ]
  });
  $("#exp_btn").addClass('active');
  $("#degree_btn").removeClass('active');
});
</script>
{% endblock %}
